<template>
    <div class="hotpro px15 py20">
      <h1 class="fz18 fwb lh14n clr5 pb15">人气单品</h1>
      <div class="hotpro-list flx flx-w-w">
        <pro v-for="(item,idx) in hotpro" :url="'/product?pid='+item.product_id" :pro="item" :key="idx" class="w50p flx-s-0"/>
      </div>
    </div>
</template>

<script>
    import Pro from "components/index/pro"
    export default {
      components: {
        Pro
      },
      data () {
        return {
          hotpro: []
        }
      },
      async created () {
        let { status, data } = await await this.$axiosApi.getIndexHotpro()
        if (status === 200 && data.code === 0) {
          this.hotpro = data.data
        }
      }
    }
</script>

<style scoped lang="stylus">
.hotpro-list
  .product-card:nth-child(even)
    padding-left 5px
  .product-card:nth-child(odd)
    padding-right 5px
</style>
